<route>
{
  "meta":{
    "title":"模版设计"
  }
}
</route>
<template>
  <excelNav
    :title="this.$route.query.name"
    :printLoading="printLoading"
    :saveLoading="saveLoading"
    @goPreview="goPreview"
    @save="submit"
    @setting="setExcelSetting"
    ref="excelNav"
  >
    <div class="formbox sz" v-loading="loading">
      <excelContainer
        v-if="excelInfo"
        :excelInfo="excelInfo"
        ref="excelContainer"
      />
    </div>
  </excelNav>
</template>

<script>
import excelNav from "./__components__/excelNav/index"
import excelContainer from "./__components__/excelContainer/index"
import { beforeunload } from "@/utils/mixins"
import {
  getHmprinttemplateInfoByKey,
  putHmprinttemplateUpdateJson,
  postHmprinttemplatePreviewByKey,
} from "@/apis/paas/HmPrintTemplateController.js"
import { encode, decode } from "js-base64"

export default {
  layout: "formlayout",
  components: { excelNav, excelContainer },
  mixins: [beforeunload],
  data() {
    return {
      excelInfo: null,
      waitPreview: false,
      previewFrame: null,
      printLoading: false,
      saveLoading: false,
    }
  },
  computed: {
    loading() {
      return !this.excelInfo
    },
  },
  created() {
    if (!this.$route.query || !this.$route.query.key) {
      this.$router.replace({
        name: "printDesign",
      })
    } else {
      this.getData()
    }
  },
  methods: {
    async getData() {
      this.excelInfo = await getHmprinttemplateInfoByKey({
        key: this.$route.query.key,
      })
    },
    submit() {
      if (this.$refs.excelContainer) {
        this.saveLoading = true
        return this.$refs.excelContainer
          .saveAllSettings()
          .then(async (settings) => {
            const json = {
              cell: settings.cell,
              colws: settings.colws,
              mergeCells: settings.mergeCells,
              pageSetting: settings.pageSetting,
              rowhs: settings.rowhs,
              cellHeight: settings.cellHeight,
              cellWithField: settings.cellWithField,
              cellWithQRcode: settings.cellWithQRcode,
              cellWithBRcode: settings.cellWithBRcode,
              cellWithImg: settings.cellWithImg || {},
              enableGridLine: settings.enableGridLine,
              compressCellDatas: settings.compressCellDatas,
              contentEdge: settings.contentEdge,
              defaultRowHeight: settings.defaultRowHeight,
              defaultColWidth: settings.defaultColWidth,
              borders: settings.borders,
              Expressions: settings.expressions,
              Filters: settings.filters,
              serviceKey: settings.serviceKey,
              customFieldList: settings.customFieldList,
            }
            console.log(json, "json")
            const data = Object.assign(
              {},
              {
                json: encode(JSON.stringify(json)),
                key: this.excelInfo.key,
              }
            )
            await putHmprinttemplateUpdateJson(data)
            this.$message.success("保存成功")
          })
          .finally(() => {
            this.saveLoading = false
          })
      } else {
        return Promise.reject()
      }
    },
    goPreview() {
      console.log("preview")
      this.printLoading = true
      this.removePreviousPreviewPage()
      this.submit()
        .then(() => {
          console.log("then")
          this.loadPreviewPage()
        })
        .catch(() => {
          console.log("catch")
          this.printLoading = false
        })
    },
    removePreviousPreviewPage() {
      if (this.previewFrame) {
        document.body.removeChild(this.previewFrame)
        this.previewFrame = null
      }
    },
    loadPreviewPage() {
      postHmprinttemplatePreviewByKey(
        { showFrame: 1 },
        {
          key: this.$route.query.key,
        }
      )
        .then((html) => {
          var iframe = document.createElement("IFRAME")
          iframe.style.display = "none"
          var doc = null
          document.body.insertBefore(iframe, document.body.firstChild)
          doc = iframe.contentWindow.document
          doc.write(html)
          doc.close()
          this.previewFrame = iframe
        })
        .finally(() => {
          this.printLoading = false
        })
    },
    setExcelSetting() {
      this.$refs.excelContainer.openGlobalPanel()
    },
  },
}
</script>
<style lang="scss" scoped>
.formbox {
  padding-top: 65px;
  height: 100%;
}
</style>
